// 2. 定义一个Vue对象
let vm = new Vue({
    el: "#app",
    data: {
        // 页面表格中的数据
        userList: [
            {
                id: 10010,
                username: "李文豪",
                sex: "1",
                birthday: '2022-07-15',
                tel: "13812345678",
                profession: "1",
                sal: 3000.15,
                address: "湖北武汉",
                remark: "我是帅哥"
            },
            {
                id: 10012,
                username: "魏聪聪",
                sex: "1",
                birthday: '2022-05-05',
                tel: "18812345678",
                profession: "2",
                sal: 4000.14,
                address: "湖北襄阳",
                remark: "我是大帅哥"
            },
            {
                id: 10013,
                username: "陈志军",
                sex: "0",
                birthday: '2022-03-25',
                tel: "15812345678",
                profession: "3",
                sal: 30500,
                address: "湖南长沙",
                remark: "hi ok"
            },
            {
                id: 10014,
                username: "郭云飞",
                sex: "0",
                birthday: '2022-02-12',
                tel: "13899945888",
                profession: "1",
                sal: 13000.25,
                address: "河北石家庄",
                remark: "大"
            },
            {
                id: 10018,
                username: "汪坔",
                sex: "1",
                birthday: '2022-07-08',
                tel: "13812345530",
                profession: "2",
                sal: 3000.25,
                address: "广州",
                remark: "很大"
            },
            {
                id: 10019,
                username: "熊周哲",
                sex: "1",
                birthday: '2022-08-05',
                tel: "13812345420",
                profession: "2",
                sal: 5999.45,
                address: "湖北武汉",
                remark: "哈哈"
            },
            {
                id: 10033,
                username: "王思维",
                sex: "1",
                birthday: '2022-12-12',
                tel: "13812345666",
                profession: "3",
                sal: 5000.25,
                address: "北京朝阳区",
                remark: "哎呀"
            },
            {
                id: 10040,
                username: "王一炜",
                sex: "0",
                birthday: '2022-09-15',
                tel: "13812345999",
                profession: "1",
                sal: 8000.15,
                address: "成都",
                remark: "你好"
            },
            {
                id: 10045,
                username: "老丁",
                sex: "0",
                birthday: '2022-10-16',
                tel: "13812345320",
                profession: "2",
                sal: 23000,
                address: "天津",
                remark: "哦哦"
            },
            {
                id: 10050,
                username: "赵鹏",
                sex: "0",
                birthday: '2022-02-03',
                tel: "13812345111",
                profession: "1",
                sal: 3500.5,
                address: "黑龙江哈尔滨",
                remark: "是呀"
            },
            {
                id: 10052,
                username: "郭建华",
                sex: "1",
                birthday: '2022-04-12',
                tel: "13812345689",
                profession: "1",
                sal: 3999.5,
                address: "内蒙古赤峰",
                remark: "vue好简单"
            },
            {
                id: 10060,
                username: "陈云飞",
                sex: "1",
                birthday: '2022-07-11',
                tel: "18888888888",
                profession: "3",
                sal: 1500,
                address: "湖北黄冈",
                remark: "哎，挣钱好难"
            }
        ],
        // 搜索关键字
        keyWords: undefined,
        // 搜索类型
        searchType: undefined,
        //分页属性
        pageInfo: {
            total: 12,
            pageSize: 10,
            pageNum: 1,
            pageSizes: [2, 3, 5, 10, 20],

        },
        // 弹窗的标记
        flag1: false,
        //添加的用户
        addUserData: {
            username: undefined,
            sex: "1",
            birthday: undefined,
            tel: undefined,
            profession: undefined,
            sal: undefined,
            address: undefined,
            remark: undefined
        },
        /*
           校验规则
         */
        ruleReg: {
            /*
                校验用户名
             */
            username: [
                // 用户名不能为空
                {required: true, message: "用户名不能为空！", trigger: "blur"},
                // 用户名必须2-10个字符
                {min: 2, max: 10, message: "用户名必须2-10个字符", trigger: "blur"}
            ],
            /*
             校验性别
             */
            sex: [
                // 性别不能为空
                {required: true, message: "性别不能为空！", trigger: "change"},
            ],
            /*
            生日校验
             */
            birthday: [
                // 生日不能为空
                {required: true, message: "生日不能为空！", trigger: "change"},
            ],
            /*
               手机号校验
             */
            tel: [
                // 手机号不能为空
                {required: true, message: "手机号不能为空！", trigger: "blur"},
                // 用户名必须11个字符
                {min: 11, max: 11, message: "手机号必须11个字符", trigger: "blur"}
            ],
            /*
            职业校验
             */
            profession: [
                // 职业不能为空
                {required: true, message: "职业不能为空！", trigger: "change"},
            ],
            /*
            薪资校验
             */
            sal: [
                // 薪资不能为空
                {required: true, message: "薪资不能为空！", trigger: "blur"},
            ],
            /*
               地址校验
             */
            address: [
                // 地址不能为空
                {required: true, message: "地址不能为空！", trigger: "blur"},
                // 地址必须2-50个字符
                {min: 2, max: 50, message: "地址必须2-50个字符", trigger: "blur"}
            ],
            /*
            备注校验
             */
            remark: [
                // 备注不能为空
                {required: true, message: "备注不能为空！", trigger: "blur"},
            ]
        },

        // 编辑窗口弹窗的标记
        flag2: false,
        //编辑的用户
        editUserData: {
            username: undefined,
            sex: "1",
            birthday: undefined,
            tel: undefined,
            profession: undefined,
            sal: undefined,
            address: undefined,
            remark: undefined
        },

        // 要删除的数据的id存入的数组
        ids: [],
    },
    methods: {
        // 做格式化的方法
        fun1: function (rowData) {
            return rowData.sex == "1" ? "男" : "女";
        },
        fun2: function (rowData) {
            switch (rowData.profession) {
                case "1":
                    return "程序猿";
                    break
                case "2":
                    return "攻城狮";
                    break
                case "3":
                    return "码农";
                    break
            }
        },

        /*
         提交表单触发该方法
         */
        submitFun: function () {
            this.$refs["frm"].validate(flag => {
                if (flag) { // 校验通过
                    // 获取数组this.userList中最后一个元素对象的id
                    let idNum = Number(this.userList[this.userList.length - 1].id);

                    // 将 addUserData.address做格式化处理
                    let year = this.addUserData.birthday.getFullYear();
                    let month = this.addUserData.birthday.getMonth();
                    let day = this.addUserData.birthday.getDate();

                    if (month + 1 < 10) {
                        month = "0" + (month + 1);
                    }
                    if (day < 10) {
                        day = "0" + day;
                    }
                    let birthdayStr = year + "-" + month + "-" + day;

                    // 校验通过,定义一个对象
                    let arrParamObj = {
                        id: idNum + 1,
                        username: this.addUserData.username,
                        sex: this.addUserData.sex,
                        birthday: birthdayStr,
                        tel: this.addUserData.tel,
                        profession: this.addUserData.profession,
                        sal: this.addUserData.sal,
                        address: this.addUserData.address,
                        remark: this.addUserData.remark
                    }
                    // 将arrParamObj对象添加到数组this.userList的最后
                    this.userList.push(arrParamObj);

                    // 窗口关闭
                    this.flag1 = false;

                    // 给一个提示
                    this.$notify({
                        title: "温馨提示",
                        message: "添加用户成功！",
                        type: "success"
                    });
                } else {// 校验失败
                    alert("校验不通过！");
                }
            });
        },
        /*
        点击重置表单,触发该方法
         */
        resetFun: function () {
            this.$refs["frm"].resetFields();
        },
        /*
          当表单关闭时,就进行重置
           包括提交和关闭窗口
         */
        closeFormReset: function () {
            this.$refs["frm"].resetFields();
        },

        /*
           点击编辑弹窗+数据回显功能
         */
        editUser: function (rowData) {
            // 1. 弹出编辑窗口
            this.flag2 = !this.flag2;
            // 2. 获取当前行数据并进行数据回显
            this.editUserData = {
                id: rowData.id,
                username: rowData.username,
                sex: rowData.sex,
                birthday: rowData.birthday,
                tel: rowData.tel,
                profession: rowData.profession,
                sal: rowData.sal,
                address: rowData.address,
                remark: rowData.remark
            };
        },
        /*
         编辑提交功能
         */
        editSubmitForm: function () {
            // 1. 对this.editUserData中的生日格式做处理
            let birthdayDate = this.editUserData.birthday;
            let year = birthdayDate.getFullYear();
            let month = birthdayDate.getMonth();
            if ((month + 1) < 10) {
                month = "0" + (month + 1);
            }
            let day = birthdayDate.getDate();
            if (day < 10) {
                day = "0" + day;
            }
            this.editUserData.birthday = year + "-" + month + "-" + day;

            // 2. 找到userList中id为 editUserData.id的用户
            this.userList = this.userList.map(item => {
                if (item.id == this.editUserData.id) {
                    item = this.editUserData;
                }
                return item;
            });

            // 3. 关闭窗口
            this.flag2 = false;

            // 4. 提示
            this.$notify({
                title: "温馨提示",
                message: "修改成功！",
                type: "success"
            });
        },
        /*
            重置编辑窗口
         */
        resetEditWin: function () {
            this.$refs["editFrm"].resetFields();
        },
        /*
           当编辑窗口关闭时,重置修改
         */
        closeFormReset: function () {
            this.$refs["editFrm"].resetFields();
        },
        /*
           删除选中的这一行数据
         */
        deleteRow: function (scope) {
            // 1. 删除提示
            this.$confirm("您确定要删除吗？", "温馨提示"
            ).then(() => {//确定删除
                // 2. 获取要删除的这一行的id
                let index = scope.$index;
                // 3. 将index索引的元素从userList中删除
                this.userList.splice(index, 1);
                // 4. 删除后的提示
                this.$notify({
                    title: "温馨提示",
                    message: "删除成功！",
                    type: "success"
                });
            }).catch(() => {// 取消删除

            });
        },
        // 全选和单选触发的方法
        /*
           当全选时 所有的行的数据会存入一个集合并传递给param
           当取消时，那么集合为空集合传递给param
         */
        selectAll: function (param) {
            // 2. 将param中每一行数据的id存入this.ids数组
            this.ids = param.map(item => {
                return item.id;
            });
        },
        /*
          当选中其中一个时 当前行的数据会存入一个数组并传递给param
          当取消时，数组会移除该行数据并传递给param
        */
        selectOne: function (param) {
            // 2. 将param中每一行数据的id存入this.ids数组
            this.ids = param.map(item => {
                return item.id;
            });
        },

        /*
           批量删除
         */
        deleteIds: function () {
            if(this.ids.length > 0 ){
                // 给一个确认删除的提示框
                this.$confirm("您确定要删除这些数据吗？").then(()=>{
                    // 确定删除
                    this.userList = this.userList.filter((item)=>{
                        // 将this.userList中元素的id不在ids数组中的元素过滤出来
                        return this.ids.indexOf(item.id) == -1;
                    });
                    // 删除成功提示
                    this.$notify({
                        title:"温馨提示",
                        message:"删除成功！",
                        type:"success"
                    });
                }).catch(()=>{
                    // 取消删除
                });
            }else{
                this.$message("请先勾选要删除的行","温馨提示");
            }
        },

        /*
           搜索功能
         */
        searchRow:function () {
            // 判断搜索类型和搜索关键字有没有
            if(this.searchType === undefined){ // 没有填搜索类型
                this.$message("请先选择搜索类型","温馨提示");
            }
            else {
                // 继续判断是否存在搜索关键字
                if(this.keyWords === undefined){
                    this.$message("请先填写您要搜索的内容","温馨提示");
                }
                else {
                    // 开始搜索
                    // 根据搜索类型判断
                    switch (this.searchType){
                        case "1":
                            // 根据编号搜索
                            this.userList = this.userList.filter((item)=>{
                                return item.id == this.keyWords;
                            })
                            break;
                        case "2":
                            // 根据姓名搜索
                            this.userList = this.userList.filter((item)=>{
                                return item.username == this.keyWords;
                            })
                            break;
                        case "3":
                            // 根据地址搜索
                            this.userList = this.userList.filter((item)=>{
                                return item.address == this.keyWords;
                            })
                            break;
                    }
                }
            }
        }
    }
});